/**
 * 响应式设计样式文件
 * 包含移动端适配的CSS媒体查询和不同屏幕尺寸的优化
 */

@import "@/styles/variables.scss";

// 响应式断点变量
$mobile-small: 320px;
$mobile-medium: 375px;
$mobile-large: 414px;
$tablet-small: 768px;
$tablet-large: 1024px;
$desktop-small: 1200px;
$desktop-large: 1440px;

// 响应式混合器
@mixin mobile-small {
  @media (max-width: #{$mobile-medium - 1px}) {
    @content;
  }
}

@mixin mobile-medium {
  @media (min-width: $mobile-medium) and (max-width: #{$mobile-large - 1px}) {
    @content;
  }
}

@mixin mobile-large {
  @media (min-width: $mobile-large) and (max-width: #{$tablet-small - 1px}) {
    @content;
  }
}

@mixin mobile-all {
  @media (max-width: #{$tablet-small - 1px}) {
    @content;
  }
}

@mixin tablet-small {
  @media (min-width: $tablet-small) and (max-width: #{$tablet-large - 1px}) {
    @content;
  }
}

@mixin tablet-large {
  @media (min-width: $tablet-large) and (max-width: #{$desktop-small - 1px}) {
    @content;
  }
}

@mixin tablet-all {
  @media (min-width: $tablet-small) and (max-width: #{$desktop-small - 1px}) {
    @content;
  }
}

@mixin desktop-small {
  @media (min-width: $desktop-small) and (max-width: #{$desktop-large - 1px}) {
    @content;
  }
}

@mixin desktop-large {
  @media (min-width: $desktop-large) {
    @content;
  }
}

@mixin desktop-all {
  @media (min-width: $desktop-small) {
    @content;
  }
}

// 横屏和竖屏检测
@mixin landscape {
  @media (orientation: landscape) {
    @content;
  }
}

@mixin portrait {
  @media (orientation: portrait) {
    @content;
  }
}

// 触摸设备检测
@mixin touch-device {
  @media (hover: none) and (pointer: coarse) {
    @content;
  }
}

@mixin non-touch-device {
  @media (hover: hover) and (pointer: fine) {
    @content;
  }
}

// 高分辨率屏幕检测
@mixin retina {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content;
  }
}

// 全局响应式样式
html {
  // 基础字体大小响应式调整
  font-size: 16px;

  @include mobile-small {
    font-size: 14px;
  }

  @include mobile-medium {
    font-size: 15px;
  }

  @include tablet-all {
    font-size: 16px;
  }

  @include desktop-all {
    font-size: 18px;
  }
}

body {
  // 防止移动端缩放
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  
  // 优化触摸滚动
  -webkit-overflow-scrolling: touch;
  
  // 移动端优化
  @include mobile-all {
    // 隐藏地址栏
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

// 应用容器响应式
#app {
  // 基础布局
  width: 100%;
  min-height: 100vh;
  
  @include mobile-all {
    min-height: -webkit-fill-available;
    padding: 0;
  }
  
  @include tablet-all {
    padding: 1rem;
  }
  
  @include desktop-all {
    padding: 2rem;
    max-width: 1440px;
    margin: 0 auto;
  }
}

// 游戏容器响应式
.game-container {
  position: relative;
  width: 100%;
  height: 100vh;
  
  @include mobile-all {
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  @include tablet-all {
    height: calc(100vh - 2rem);
    border-radius: $border-radius-lg;
    overflow: hidden;
  }
  
  @include desktop-all {
    height: calc(100vh - 4rem);
    max-height: 800px;
    border-radius: $border-radius-xl;
    box-shadow: $shadow-lg;
  }
}

// 游戏画布响应式
.game-canvas {
  width: 100%;
  height: 100%;
  
  @include mobile-all {
    // 移动端全屏显示
    border-radius: 0;
    box-shadow: none;
  }
  
  @include tablet-all {
    border-radius: $border-radius-md;
  }
  
  @include desktop-all {
    border-radius: $border-radius-lg;
  }
  
  // 横屏优化
  @include landscape {
    @include mobile-all {
      // 横屏时调整高度以适应屏幕
      height: 100vh;
      height: -webkit-fill-available;
    }
  }
}

// 游戏UI响应式
.game-ui {
  // 顶部信息栏
  .top-bar {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    
    @include mobile-all {
      top: env(safe-area-inset-top, 0.5rem);
      left: env(safe-area-inset-left, 0.5rem);
      right: env(safe-area-inset-right, 0.5rem);
    }
    
    .score-info {
      gap: 1rem;
      
      @include mobile-small {
        gap: 0.5rem;
        flex-direction: column;
      }
      
      .score, .distance {
        padding: 0.5rem 1rem;
        
        @include mobile-all {
          padding: 0.25rem 0.75rem;
        }
        
        .value {
          font-size: 1.5rem;
          
          @include mobile-all {
            font-size: 1.2rem;
          }
          
          @include mobile-small {
            font-size: 1rem;
          }
        }
      }
    }
    
    .game-controls {
      .control-btn {
        width: 40px;
        height: 40px;
        
        @include mobile-all {
          width: 36px;
          height: 36px;
        }
        
        @include touch-device {
          // 触摸设备增大点击区域
          width: 44px;
          height: 44px;
        }
      }
    }
  }
  
  // 侧边栏
  .side-bar {
    width: 200px;
    
    @include mobile-all {
      width: 150px;
    }
    
    @include mobile-small {
      width: 120px;
    }
    
    &.left {
      left: 1rem;
      
      @include mobile-all {
        left: env(safe-area-inset-left, 0.5rem);
      }
    }
  }
  
  // 移动端控制按钮
  .mobile-controls {
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    
    @include mobile-all {
      bottom: env(safe-area-inset-bottom, 1rem);
      left: env(safe-area-inset-left, 1rem);
      right: env(safe-area-inset-right, 1rem);
    }
    
    .mobile-btn {
      &.move-btn {
        width: 60px;
        height: 60px;
        
        @include mobile-small {
          width: 50px;
          height: 50px;
        }
      }
      
      &.action-btn {
        width: 80px;
        height: 80px;
        
        @include mobile-small {
          width: 70px;
          height: 70px;
        }
      }
    }
    
    // 横屏时调整布局
    @include landscape {
      @include mobile-all {
        bottom: 1rem;
        
        .control-group {
          &.right {
            flex-direction: row;
            gap: 1rem;
          }
        }
      }
    }
  }
  
  // 暂停菜单
  .pause-overlay {
    .pause-menu {
      max-width: 300px;
      width: 90%;
      
      @include mobile-all {
        width: 95%;
        max-width: 280px;
        padding: 1.5rem;
      }
      
      @include mobile-small {
        padding: 1rem;
      }
      
      h2 {
        font-size: 1.5rem;
        
        @include mobile-all {
          font-size: 1.3rem;
        }
      }
      
      .pause-buttons {
        .btn {
          padding: 0.75rem 1.5rem;
          font-size: 1rem;
          
          @include mobile-all {
            padding: 1rem;
            font-size: 1.1rem;
          }
        }
      }
    }
  }
}

// 菜单页面响应式
.game-menu {
  padding: 2rem;
  
  @include mobile-all {
    padding: 1rem;
  }
  
  .menu-container {
    max-width: 400px;
    
    @include mobile-all {
      max-width: 320px;
    }
  }
  
  .game-title {
    font-size: 3rem;
    
    @include mobile-all {
      font-size: 2.5rem;
    }
    
    @include mobile-small {
      font-size: 2rem;
    }
  }
  
  .menu-buttons {
    .btn {
      padding: 1rem 2rem;
      font-size: 1.1rem;
      
      @include mobile-all {
        padding: 1rem;
        font-size: 1rem;
      }
      
      @include touch-device {
        // 触摸设备增大点击区域
        min-height: 48px;
      }
    }
  }
}

// 角色选择页面响应式
.character-select {
  .character-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    
    @include mobile-all {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
    }
    
    @include mobile-small {
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }
  }
  
  .character-card {
    padding: 1.5rem;
    
    @include mobile-all {
      padding: 1rem;
    }
    
    @include mobile-small {
      padding: 0.75rem;
    }
  }
}

// 设置页面响应式
.settings-panel {
  .settings-section {
    margin-bottom: 2rem;
    
    @include mobile-all {
      margin-bottom: 1.5rem;
    }
  }
  
  .setting-item {
    padding: 1rem;
    
    @include mobile-all {
      padding: 0.75rem;
    }
    
    .setting-control {
      @include mobile-all {
        width: 100%;
        margin-top: 0.5rem;
      }
    }
  }
}

// 排行榜页面响应式
.leaderboard {
  .leaderboard-table {
    @include mobile-all {
      font-size: 0.9rem;
    }
    
    th, td {
      padding: 0.75rem;
      
      @include mobile-all {
        padding: 0.5rem 0.25rem;
      }
    }
  }
}

// 通用响应式工具类
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  
  @include mobile-all {
    padding: 0 0.5rem;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
  
  @include mobile-all {
    margin: 0 -0.25rem;
  }
}

.col {
  flex: 1;
  padding: 0 0.5rem;
  
  @include mobile-all {
    padding: 0 0.25rem;
  }
}

// 隐藏/显示工具类
.hide-mobile {
  @include mobile-all {
    display: none !important;
  }
}

.hide-tablet {
  @include tablet-all {
    display: none !important;
  }
}

.hide-desktop {
  @include desktop-all {
    display: none !important;
  }
}

.show-mobile {
  display: none !important;
  
  @include mobile-all {
    display: block !important;
  }
}

.show-tablet {
  display: none !important;
  
  @include tablet-all {
    display: block !important;
  }
}

.show-desktop {
  display: none !important;
  
  @include desktop-all {
    display: block !important;
  }
}

// 文本对齐响应式
.text-center-mobile {
  @include mobile-all {
    text-align: center !important;
  }
}

.text-left-desktop {
  @include desktop-all {
    text-align: left !important;
  }
}

// 间距响应式工具类
.p-responsive {
  padding: 1rem;
  
  @include mobile-all {
    padding: 0.5rem;
  }
  
  @include desktop-all {
    padding: 2rem;
  }
}

.m-responsive {
  margin: 1rem;
  
  @include mobile-all {
    margin: 0.5rem;
  }
  
  @include desktop-all {
    margin: 2rem;
  }
}